<template>
  <div class="hello">
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="题目">
        <el-input v-model="form.titleslug" placeholder="题目"></el-input>
      </el-form-item>
      <el-form-item label="入参1">
        <el-input v-model="form.inputcases1" placeholder="入参1"></el-input>
      </el-form-item>
      <el-form-item label="入参类型1">
        <el-select v-model="form.inputType1" placeholder="入参类型1">
          <el-option label="数组" value="数组"></el-option>
          <el-option label="字符串" value="字符串"></el-option>
          <el-option label="集合" value="集合"></el-option>
          <el-option label="队列" value="队列"></el-option>
          <el-option label="列表" value="列表"></el-option>
          <el-option label="树" value="树"></el-option>
          <el-option label="Map" value="Map"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="入参2">
        <el-input v-model="form.inputcases2" placeholder="入参2"></el-input>
      </el-form-item>
      <el-form-item label="入参类型2">
        <el-select v-model="form.inputType2" placeholder="入参类型2">
          <el-option label="数组" value="数组"></el-option>
          <el-option label="字符串" value="字符串"></el-option>
          <el-option label="集合" value="集合"></el-option>
          <el-option label="队列" value="队列"></el-option>
          <el-option label="列表" value="列表"></el-option>
          <el-option label="树" value="树"></el-option>
          <el-option label="Map" value="Map"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="预期">
        <el-input v-model="form.expected" placeholder="预期"></el-input>
      </el-form-item>
      <el-form-item label="预期类型">
        <el-select v-model="form.expectedType" placeholder="预期类型">
          <el-option label="数组" value="数组"></el-option>
          <el-option label="字符串" value="字符串"></el-option>
          <el-option label="集合" value="集合"></el-option>
          <el-option label="队列" value="队列"></el-option>
          <el-option label="列表" value="列表"></el-option>
          <el-option label="树" value="树"></el-option>
          <el-option label="Map" value="Map"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="tableData"
        height="250"
        border
        style="width: 100%">
      <el-table-column
          prop="titleslug"
          label="题目"
          width="180">
      </el-table-column>
      <el-table-column
          prop="inputcases1"
          label="入参1"
          width="180">
      </el-table-column>
      <el-table-column
          prop="inputType1"
          label="入类型1">
      </el-table-column>
      <el-table-column
          prop="inputcases2"
          label="入参2"
          width="180">
      </el-table-column>
      <el-table-column
          prop="inputType1"
          label="入类型2">
      </el-table-column>
      <el-table-column
          prop="expected"
          label="预期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="expectedType"
          label="预期类型">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      tableData: [],
      form: {
        titleslug: '',
        inputcases1: '',
        inputType1: '',
        inputcases2: '',
        inputType2: '',
        expected: '',
        expectedType: ''
      },
      config: {
        pageNo: 1,
        pageSize: 1000
      }
    }
  },
  methods: {
    onSubmit() {
      // 发送 POST 请求
      axios({
        crossDomain: true,
        baseURL: "http://localhost:9090",
        method: 'post',
        url: '/testcase/save',
        headers: {
          'Content-Type': 'application/json;charset=UTF-8'
        },
        data: this.form
      }).then(res => {
        console.log(res)
      })


    },
    getTableData() {
      axios({
        crossDomain: true,
        baseURL: "http://localhost:9090",
        method: 'post',
        url: '/testcase/select',
        headers: {
          'Content-Type': 'application/json;charset=UTF-8'
        },
        data: this.config
      }).then(res => {
        if (res.status == "200")
          this.tableData = res.data;
        console.log(res)
      })
    }
  },
  mounted() {
    this.getTableData()
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
